<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
    <meta charset="UTF-8">
    <title>angular-transclude</title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<div ng-controller="parentController">
    <button-bar>
        <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
        <button class="primary">Primary2</button>
        <button class="secondary">Secondary1</button>
    </button-bar>
</div>

<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>

<script>
    var testapp = angular.module('testapp', []);
    testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {

    }]);
    testapp.directive('primary', function() {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.addClass('btn btn-primary');
            }
        }
    });
    testapp.directive('secondary', function() {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.addClass('btn');
            }
        }
    });
    testapp.directive('buttonBar', function() {
        return {
            restrict: 'EA',
            template: '<div class="span4 well clearfix"></div>',
            replace: true,
            transclude: true,
            compile: function(elem, attrs, transcludeFn) {
                console.log(transcludeFn);
                return function (scope, element, attrs) {

                };
            }
        };
    });
</script>
</body>
</html>